<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="0"  style="width: 300px; text-align: center;">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    爱好:
    <input type="checkbox" name = "hobby" value="eat">吃
    <input type="checkbox" name = "hobby" value="drink">喝
    <input type="checkbox" name = "hobby" value="pay">玩
    <input type="checkbox" name = "hobby" value="happy">乐
    <input type="submit" value="提交">
    <p>好好学习</p>
    <p>天天向上</p>
</body>
<script src="js/jquery-3.7.1.js"></script>
<script>
    $("table tr:even").not(":first").css("background","#45e");
    $("table tr:odd").css("background","#4e5")

    $("input[type = submit]").click(function(){
        var cks = $("input[name = hobby]:checked");
        console.log("您的爱好有"+cks.length+"个")
        for(var i = 0;i<cks.length;i++){
            var v= $(cks[i]).value;
            console.log(v)
        }
    })

    $("p").click(function(){
        // alert("2");
        var str = this.innerText;
        console.log(str);
    })
</script>
</html>